<template>
<el-dialog class="dispatch-set" :append-to-body="true" :title="dispatchData.title" :visible.sync="dispatchData.show" width="600px" :close-on-click-modal="false">
    <title-bar title="调度设置"></title-bar>
    <schedul ref="refSchedul" :dispatchData="dispatchData" @save="canGetData.schedulStatus=true" @clearDownstreamSchedules="isClearDownJob=true"></schedul>
    <title-bar style="margin-top: 8px;" title="任务设置"></title-bar>
    <job-setting ref="refJob" :dispatchData="dispatchData" @save="canGetData.jobStatus=true"></job-setting>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dispatchData.show=false">取 消</el-button>
      <el-button type="primary" v-preventReClick="2000" @click="handleSave">确 定</el-button>
    </span>
</el-dialog>
</template>

<script>
import titleBar from '@/components/TitleBar'
import jobSetting from './jobSetting'
import schedul from './Schedul'
export default {
    name: 'DispatchSet',
    props: {
        dispatchData: {
            type: Object,
            required: true
        }
    },
    components: {
        titleBar,
        jobSetting,
        schedul
    },
    data () {
        return {
            isClearDownJob: false,
            canGetData: {
                schedulStatus: false,
                jobStatus: false
            }
        }
    },
    mounted () {
        this.init(this.dispatchData.form.upstreamSchedules)
        this.init(this.dispatchData.form.downstreamSchedules)
    },
    watch: {
        canGetData: {
            handler (val) {
                if (val.schedulStatus && val.jobStatus) {
                    if (this.isClearDownJob) {
                        this.dispatchData.form.downstreamSchedules = []
                    }
                    this.$emit('save')
                }
            },
            deep: true
        }
    },
    methods: {
        addZero (str) {
            if (str < 10) {
                return '0' + str
            }
            return str
        },
        init (arr) {
            for (let i = 0; i < arr.length; i++) {
                let cronObj = JSON.parse(arr[i].cronObj)
                let addZeroCronObj = JSON.parse(arr[i].cronObj)
                let period = ''
                let schedulTimeStr = ''
                cronObj.hourExp = cronObj.hourExp ? this.addZero(cronObj.hourExp) : ''
                cronObj.minuteExp = cronObj.minuteExp ? this.addZero(cronObj.minuteExp) : ''
                cronObj.secondExp = cronObj.secondExp ? this.addZero(cronObj.secondExp) : ''
                switch (arr[i].periodType) {
                    case 5:
                        period = `${cronObj.monthExp}月`
                        schedulTimeStr = `每月${cronObj.dayExp}号,${cronObj.hourExp}:${cronObj.minuteExp}:${cronObj.secondExp}`
                        break
                    case 3:
                        period = `${cronObj.dayExp}天`
                        schedulTimeStr = `${cronObj.hourExp}:${cronObj.minuteExp}:${cronObj.secondExp}`
                        break
                    case 4:
                        period = '每周'
                        schedulTimeStr = `星期${cronObj.weekExp},${cronObj.hourExp}:${cronObj.minuteExp}:${cronObj.secondExp}`
                        break
                    case 2:
                        period = `${addZeroCronObj.hourExp}小时`
                        schedulTimeStr = `${cronObj.minuteExp}分${cronObj.secondExp}秒`
                        break
                    case 1:
                        period = `${addZeroCronObj.minuteExp}分钟`
                        schedulTimeStr = `${cronObj.secondExp}秒`
                        break
                }
                arr[i].period = period
                arr[i].schedulTimeStr = schedulTimeStr
            }
            return arr
        },
        handleSave () {
            this.$refs.refSchedul.handleSave()
            this.$refs.refJob.handleSave()
        }
    }
}
</script>

<style lang="less">
.dispatch-set {
    .el-divider--horizontal {
        height: 0;
    }
    .el-date-editor--datetimerange {
        width: 507px;
    }
    .el-input, .el-select {
        width: 245px !important;
    }
    .dispatch-set-time {
        display: flex;
        .el-form-item {
            .el-input {
                width: auto !important;
            }
        }
    }
    .dispatch-set-switch {
        display: flex;
        align-items: center;
        .el-form-item__content {
            margin-left: 0 !important;
        }
    }
}
</style>
